<template>
  <Row>
    <Col :span="12">
      <BasicTable @register="registerTable" @row-click="handleShowDictData">
        <template #toolbar>
          <a-button
            type="primary"
            v-if="hasPermission(['sysDictType:add'])"
            @click="handleCreate"
          >
            {{ t('新增字典类型') }}
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                auth: 'sysDictType:edit',
                tooltip: t('编辑字典类型'),
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                auth: 'sysDictType:delete',
                color: 'error',
                tooltip: t('删除字典类型'),
                popConfirm: {
                  title: t('是否确认删除'),
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
      <DictTypeModal @register="registerDrawer" @success="handleSuccess" />
    </Col>
    <Col :span="12">
      <DictDataList ref="dictData" />
    </Col>
  </Row>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'SysDict',
});
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { Row, Col } from 'ant-design-vue';
import { usePermission } from '@/hooks/web/usePermission';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {
  getSysDictTypePage,
  deleteSysDictType,
} from '@/api/sys/sysDictTypeManage';
import { useModal } from '@/components/Modal';
import DictTypeModal from './DictTypeModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { columns, searchFormSchema } from './dict.data';
import DictDataList from './DictDataList.vue';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();
const { hasPermission } = usePermission();
const { createMessage } = useMessage();
const [registerDrawer, { openModal }] = useModal();
const [registerTable, { reload }] = useTable({
  title: t('字典列表'),
  tableKey: 'sysDictData:add',
  api: getSysDictTypePage,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    baseColProps: {
      span: 12
    }
  },
  rowSelection: {
    type: 'radio',
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  striped: true,
  showIndexColumn: false,
  actionColumn: {
    auth: ['sysDictType:edit', 'sysDictType:delete'],
    width: 120,
    title: t('操作'),
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
  afterFetch: loadTypesAfter,
});

function handleCreate() {
  openModal(true, {
    isUpdate: false,
  });
}

function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
  });
}
const dictData = ref(null);

function handleShowDictData(record: Recordable) {
  dictData.value.loadDictData(record.id);
}

function handleDelete(record: Recordable) {
  deleteSysDictType([record.id]).then(() => {
    createMessage.success(t('删除成功'));
    reload();
  });
}
function loadTypesAfter(records: Recordable[]) {
  if (records.length) {
    dictData.value.loadDictData(records[0].id);
  }
}
function handleSuccess() {
  reload();
}
</script>
